<template>
  <!-- 医生母模板页 -->
  <div class="doctor-home-container">
    <!-- 侧边栏 -->
    <SiderLift />
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 头部 -->
      <!-- 动态传递标题 -->
      <TopHeader :title="currentTitle" />
      <!-- 主要内容区 - 添加滚动容器 -->
      <div class="content-wrapper">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import SiderLift from "@/components/doctor/SiderLift.vue";
import TopHeader from "@/components/doctor/TopHeader.vue";

const route = useRoute();
const currentTitle = ref("医生工作台");

// 监听路由变化，更新标题
watch(
  () => route.meta.title,
  (newTitle) => {
    console.log("路由变化，新的标题：", newTitle);
    if (newTitle) {
      currentTitle.value = newTitle;
    } else {
      currentTitle.value = "医生工作台"; // 默认标题
    }
  },
  { immediate: true }
); // 立即执行一次
</script>

<style lang="scss" scoped>
.doctor-home-container {
  display: flex;
  min-height: 100vh;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 内容包装器 - 添加滚动功能 */
.content-wrapper {
  flex: 1;
  overflow-y: auto;
  background-color: #f5f7fa;
  padding: 0;
  
  /* 自定义滚动条样式 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
    
    &:hover {
      background: #a8a8a8;
    }
  }
}

/* 确保 body 样式正确 */
body {
  background-color: #f5f7fa;
  color: #303133;
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden; /* 防止整个页面滚动 */
}
</style>